const path = require('path')
// 导入在内存中生成HTML页面的插件
const htmlWebPlugin = require('html-webpack-plugin')

module.exports = {
    entry: path.join(__dirname, './src/main.js'),   // 配置入口文件
    output: {
        path: path.join(__dirname, './dist'),   // 配置输出目录路径
        filename: 'bundle.js'   // 输出文件名
    },
    plugins: [
        new htmlWebPlugin({
            template: path.join(__dirname, './src/index.html'),  // 指定模板页面，将来会根据指定的页面路径，去生成内存中的页面
            filename: 'index.html', // 指定生成的页面的名称
        })
    ],
    module: {   // 用于配置所有的第三方模块加载器
        rules: [
            // 所有第三方模块的匹配规则，load的调用规则顺序为 从右向左 (即先调用 'css-loader'，然后调用 'style-loader')
            { test: /\.css$/, use: ['style-loader', 'css-loader' ] },
            { test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] },
            { test: /\.scss$/, use: ['style-loader', 'css-loader', 'sass-loader'] },
            // 处理图片加载，指定的图片大小如果>=limit设定的值，通过地址引用，否则通过base64编码编码为字符串
            /*
            *  通过地址引用后，名字和指定的文件名不一致，为了防止名称冲突，url-loader用hash值命名
            *  webpack打包的时候会把所有的静态文件放到根目录（虚拟，实际为内存），
            *  比如通过 http://localhost:8080/[image_name] 引用
            *
            *  可以通过传参去除该特性 name=[name].[ext]，名称和后缀名保持原样
            *  [hash:8]: 产生8位的hash值
            *  name 可以不配置，默认使用hash值重命名
            */
            { test: /\.(jpg|png|gif|bmp|gpeg)$/, use: 'url-loader?limit=8193&name=[hash:8]-[name].[ext]'},

            // 处理字体文件的加载器
            { test: /\.(ttf|eot|svg|woff|woff2)$/, use: 'url-loader' },

            // 配置Babel 配置
            { test: /\.js$/, use: 'babel-loader', exclude: /node_modules/ },

            // vue 解析配置
            { test: /\.vue$/, use: 'vue-loader' },

        ]   

    },

    resolve: {
        alias: {
            // 设置 vue 被导入时候的包
            // "vue$": "vue/dist/vue.js"
        }
    }
}



// 使用 webpack-dev-server 这个工具，来实现自动打包编译的功能
// 1. 运行 npm i webpack-dev-server -D 把这个工具安装到项目的本地开发依赖